{% extends 'base.html' %}

{% block content %}
    <div class="form-container">
        <h1>上传文件</h1>
        <form id="upload_form" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <label for="name">知识库名称：</label>
            <input type="text" id="collection_name" name="collection_name" required>
            <br><br>
            <label for="upload_type">选择导入类型: </label>
            <select name="upload_type" id="upload_type">
                <option value="general">普通导入</option>
                <option value="qa">QA问题导入</option>
            </select><br><br>

            <input type="file" name="file">
            <p id="file_type_info">允许的文件类型：PDF (.pdf), DOC (.doc), XLS (.xls), XLSX (.xlsx)</p>
            <button type="submit">上传文件</button>
        </form>
    </div>

    <script>
        document.getElementById('upload_type').addEventListener('change', function () {
            var uploadType = this.value;
            var fileTypeInfo = document.getElementById('file_type_info');
            if (uploadType === 'general') {
                fileTypeInfo.textContent = '允许的文件类型：PDF (.pdf), DOC (.doc), XLS (.xls), XLSX (.xlsx)';
            } else if (uploadType === 'qa') {
                fileTypeInfo.textContent = '允许的文件类型：XLS (.xls), XLSX (.xlsx)';
            }
        });
document.getElementById('upload_form').addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单的默认提交行为
        var formData = new FormData(this); // 创建FormData对象

        fetch("{% url 'upload_file' %}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRFToken': '{{ csrf_token }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message); // 显示成功提示
            } else {
                alert(data.message); // 显示失败提示
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('请求失败，请稍后重试');
        });
    });
    </script>
{% endblock %}
